<template>
    <el-image class="rounded" :src="src" @click.native="reset"/>
</template>

<script>
import { captcha } from 'src/api/user';

export default {
    name: "ImageCaptcha",
    props: {
        autoRefresh: Number
    },
    data() {
        return {
            src: null ,
            timer: null 
        }
    },
    methods: {
        reset() {
            captcha().then(response => {
                this.src = response.data.image
                this.$emit('update', response.data.clientId)
            })
        }
    },
    mounted() {
        this.reset();
        if (this.autoRefresh) {
            this.timer = window.setInterval(this.reset.bind(this), this.autoRefresh * 1000);
        }
    },
    beforeDestroy() {
        window.clearInterval(this.timer);
    }
}
</script>

<style scoped>
.el-image {
    flex: none;
    width: 104px;
    height: 48px;
}
</style>